<template>
  <div class="profile-page">
    <!-- 用户信息头部 -->
    <section class="profile-header bg-primary text-white py-5">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-8">
            <div class="d-flex align-items-center">
              <div class="avatar-section me-4">
                <div class="avatar position-relative">
                  <img :src="user.avatar" :alt="user.name" class="rounded-circle border border-3 border-white" style="width: 100px; height: 100px; object-fit: cover;">
                  <button class="btn btn-light btn-sm position-absolute bottom-0 end-0 rounded-circle" 
                          style="width: 30px; height: 30px;"
                          @click="editAvatar">
                    <i class="fas fa-camera"></i>
                  </button>
                </div>
              </div>
              <div class="user-info">
                <h2 class="mb-2">{{ user.name }}</h2>
                <p class="mb-2 opacity-75">{{ user.bio }}</p>
                <div class="user-stats d-flex gap-4">
                  <div class="stat-item text-center">
                    <div class="h5 mb-0">{{ user.stats.followers }}</div>
                    <small>粉丝</small>
                  </div>
                  <div class="stat-item text-center">
                    <div class="h5 mb-0">{{ user.stats.following }}</div>
                    <small>关注</small>
                  </div>
                  <div class="stat-item text-center">
                    <div class="h5 mb-0">{{ user.stats.reviews }}</div>
                    <small>评价</small>
                  </div>
                  <div class="stat-item text-center">
                    <div class="h5 mb-0">{{ user.stats.favorites }}</div>
                    <small>收藏</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 text-md-end">
            <button class="btn btn-light me-2" @click="editProfile">
              <i class="fas fa-edit me-2"></i>编辑资料
            </button>
            <button class="btn btn-outline-light" @click="logout">
              <i class="fas fa-sign-out-alt me-2"></i>退出登录
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- 导航标签 -->
    <section class="profile-nav bg-white sticky-top shadow-sm">
      <div class="container">
        <ul class="nav nav-tabs">
          <li class="nav-item" v-for="tab in profileTabs" :key="tab.id">
            <button class="nav-link" 
                    :class="{ active: activeTab === tab.id }"
                    @click="activeTab = tab.id">
              <i :class="tab.icon" class="me-2"></i>{{ tab.name }}
            </button>
          </li>
        </ul>
      </div>
    </section>

    <div class="container mt-4">
      <div class="row">
        <!-- 侧边栏 -->
        <div class="col-lg-3 mb-4">
          <!-- 个人信息卡片 -->
          <div class="card mb-4">
            <div class="card-body">
              <h6 class="card-title mb-3">个人信息</h6>
              <div class="info-item mb-3">
                <small class="text-muted d-block">会员等级</small>
                <div class="d-flex align-items-center">
                  <span class="badge bg-warning text-dark me-2">黄金会员</span>
                  <small class="text-muted">经验值 85%</small>
                </div>
                <div class="progress mt-1" style="height: 4px;">
                  <div class="progress-bar bg-warning" style="width: 85%"></div>
                </div>
              </div>
              <div class="info-item mb-3">
                <small class="text-muted d-block">注册时间</small>
                <span>{{ user.joinDate }}</span>
              </div>
              <div class="info-item mb-3">
                <small class="text-muted d-block">最后登录</small>
                <span>{{ user.lastLogin }}</span>
              </div>
              <div class="info-item">
                <small class="text-muted d-block">邮箱验证</small>
                <span class="text-success">
                  <i class="fas fa-check-circle me-1"></i>已验证
                </span>
              </div>
            </div>
          </div>

          <!-- 快捷操作 -->
          <div class="card">
            <div class="card-body">
              <h6 class="card-title mb-3">快捷操作</h6>
              <div class="quick-actions">
                <button v-for="action in quickActions" 
                        :key="action.id"
                        class="btn btn-outline-primary btn-sm w-100 mb-2 text-start"
                        @click="handleQuickAction(action.id)">
                  <i :class="action.icon" class="me-2"></i>{{ action.name }}
                </button>
              </div>
            </div>
          </div>

          <!-- 成就徽章 -->
          <div class="card mt-4">
            <div class="card-header bg-info text-white">
              <h6 class="mb-0"><i class="fas fa-trophy me-2"></i>我的成就</h6>
            </div>
            <div class="card-body">
              <div class="row text-center">
                <div v-for="badge in userBadges" :key="badge.id" class="col-4 mb-3">
                  <div class="badge-item">
                    <i :class="badge.icon" class="text-warning fa-lg mb-2"></i>
                    <small class="d-block">{{ badge.name }}</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 主要内容 -->
        <div class="col-lg-9">
          <!-- 我的收藏 -->
          <div v-if="activeTab === 'favorites'" class="tab-content">
            <div class="d-flex justify-content-between align-items-center mb-4">
              <h4 class="mb-0">我的收藏</h4>
              <div class="btn-group">
                <button class="btn btn-outline-primary btn-sm"
                        :class="{ active: favoriteType === 'cities' }"
                        @click="favoriteType = 'cities'">
                  城市
                </button>
                <button class="btn btn-outline-primary btn-sm"
                        :class="{ active: favoriteType === 'attractions' }"
                        @click="favoriteType = 'attractions'">
                  景点
                </button>
                <button class="btn btn-outline-primary btn-sm"
                        :class="{ active: favoriteType === 'foods' }"
                        @click="favoriteType = 'foods'">
                  美食
                </button>
                <button class="btn btn-outline-primary btn-sm"
                        :class="{ active: favoriteType === 'restaurants' }"
                        @click="favoriteType = 'restaurants'">
                  餐厅
                </button>
              </div>
            </div>

            <div v-if="favoriteItems.length > 0" class="row">
              <div v-for="item in favoriteItems" :key="item.id" class="col-md-6 col-lg-4 mb-4">
                <div class="favorite-card card h-100 shadow-sm">
                  <img :src="item.image" class="card-img-top" :alt="item.name" style="height: 150px; object-fit: cover;">
                  <div class="card-body">
                    <h6 class="card-title">{{ item.name }}</h6>
                    <p class="card-text text-muted small">{{ item.description }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                      <span class="badge bg-primary">{{ item.type }}</span>
                      <div class="d-flex gap-1">
                        <button class="btn btn-outline-primary btn-sm" @click="viewItem(item)">
                          <i class="fas fa-eye"></i>
                        </button>
                        <button class="btn btn-outline-danger btn-sm" @click="removeFavorite(item.id)">
                          <i class="fas fa-trash"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="text-center py-5">
              <i class="fas fa-heart fa-3x text-muted mb-3"></i>
              <h5>暂无收藏</h5>
              <p class="text-muted">您还没有收藏任何内容</p>
              <router-link to="/cities" class="btn btn-primary">开始探索</router-link>
            </div>
          </div>

          <!-- 我的评价 -->
          <div v-if="activeTab === 'reviews'" class="tab-content">
            <h4 class="mb-4">我的评价</h4>
            <div v-if="userReviews.length > 0">
              <div v-for="review in userReviews" :key="review.id" class="card mb-3">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                      <h6 class="mb-1">{{ review.target }}</h6>
                      <div class="d-flex align-items-center">
                        <span class="text-warning me-2">
                          <i class="fas fa-star" v-for="n in 5" :key="n" 
                             :class="n <= review.rating ? 'text-warning' : 'text-muted'"></i>
                        </span>
                        <small class="text-muted">{{ review.date }}</small>
                      </div>
                    </div>
                    <span class="badge bg-primary">{{ review.type }}</span>
                  </div>
                  <p class="card-text">{{ review.content }}</p>
                  <div class="d-flex flex-wrap gap-2 mb-3">
                    <span v-for="tag in review.tags" :key="tag" class="badge bg-light text-dark">
                      {{ tag }}
                    </span>
                  </div>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex gap-2">
                      <button class="btn btn-outline-primary btn-sm" @click="editReview(review.id)">
                        <i class="fas fa-edit me-1"></i>编辑
                      </button>
                      <button class="btn btn-outline-danger btn-sm" @click="deleteReview(review.id)">
                        <i class="fas fa-trash me-1"></i>删除
                      </button>
                    </div>
                    <div class="review-stats">
                      <small class="text-muted me-3">
                        <i class="fas fa-thumbs-up me-1"></i>{{ review.likes }}
                      </small>
                      <small class="text-muted">
                        <i class="fas fa-comment me-1"></i>{{ review.comments }}
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="text-center py-5">
              <i class="fas fa-comment fa-3x text-muted mb-3"></i>
              <h5>暂无评价</h5>
              <p class="text-muted">您还没有发表过任何评价</p>
              <router-link to="/cities" class="btn btn-primary">去评价</router-link>
            </div>
          </div>

          <!-- 行程规划 -->
          <div v-if="activeTab === 'plans'" class="tab-content">
            <div class="d-flex justify-content-between align-items-center mb-4">
              <h4 class="mb-0">我的行程</h4>
              <button class="btn btn-primary" @click="createNewPlan">
                <i class="fas fa-plus me-2"></i>新建行程
              </button>
            </div>

            <div v-if="travelPlans.length > 0" class="row">
              <div v-for="plan in travelPlans" :key="plan.id" class="col-md-6 mb-4">
                <div class="plan-card card h-100 shadow-sm">
                  <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                      <h5 class="card-title">{{ plan.title }}</h5>
                      <span class="badge" :class="plan.statusClass">{{ plan.status }}</span>
                    </div>
                    <p class="card-text text-muted small">{{ plan.description }}</p>
                    <div class="plan-info mb-3">
                      <div class="d-flex justify-content-between small text-muted mb-2">
                        <span><i class="fas fa-calendar me-1"></i>{{ plan.duration }}</span>
                        <span><i class="fas fa-users me-1"></i>{{ plan.travelers }}</span>
                      </div>
                      <div class="d-flex justify-content-between small text-muted">
                        <span><i class="fas fa-map-marker-alt me-1"></i>{{ plan.destination }}</span>
                        <span><i class="fas fa-dollar-sign me-1"></i>{{ plan.budget }}</span>
                      </div>
                    </div>
                    <div class="progress mb-3" style="height: 6px;">
                      <div class="progress-bar" :class="plan.progressClass" :style="{ width: plan.progress + '%' }"></div>
                    </div>
                    <div class="d-flex gap-2">
                      <button class="btn btn-primary btn-sm flex-grow-1" @click="viewPlan(plan.id)">
                        查看详情
                      </button>
                      <button class="btn btn-outline-secondary btn-sm" @click="editPlan(plan.id)">
                        <i class="fas fa-edit"></i>
                      </button>
                      <button class="btn btn-outline-danger btn-sm" @click="deletePlan(plan.id)">
                        <i class="fas fa-trash"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="text-center py-5">
              <i class="fas fa-route fa-3x text-muted mb-3"></i>
              <h5>暂无行程</h5>
              <p class="text-muted">您还没有创建任何行程计划</p>
              <button class="btn btn-primary" @click="createNewPlan">开始规划</button>
            </div>
          </div>

          <!-- 账户设置 -->
          <div v-if="activeTab === 'settings'" class="tab-content">
            <h4 class="mb-4">账户设置</h4>
            <div class="card">
              <div class="card-body">
                <form @submit.prevent="updateSettings">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="mb-3">
                        <label class="form-label">姓名</label>
                        <input type="text" class="form-control" v-model="settings.name">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="mb-3">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-control" v-model="settings.email">
                      </div>
                    </div>
                  </div>
                  
                  <div class="mb-3">
                    <label class="form-label">个人简介</label>
                    <textarea class="form-control" rows="3" v-model="settings.bio" placeholder="介绍一下自己..."></textarea>
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="mb-3">
                        <label class="form-label">手机号码</label>
                        <input type="tel" class="form-control" v-model="settings.phone">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="mb-3">
                        <label class="form-label">所在地</label>
                        <input type="text" class="form-control" v-model="settings.location">
                      </div>
                    </div>
                  </div>

                  <hr class="my-4">

                  <h6 class="mb-3">通知设置</h6>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="emailNotifications" v-model="settings.notifications.email">
                        <label class="form-check-label" for="emailNotifications">邮件通知</label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="pushNotifications" v-model="settings.notifications.push">
                        <label class="form-check-label" for="pushNotifications">推送通知</label>
                      </div>
                    </div>
                  </div>

                  <div class="d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-outline-secondary" @click="resetSettings">
                      重置
                    </button>
                    <button type="submit" class="btn btn-primary" :disabled="saving">
                      <span v-if="saving" class="spinner-border spinner-border-sm me-2"></span>
                      {{ saving ? '保存中...' : '保存设置' }}
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      activeTab: 'favorites',
      favoriteType: 'cities',
      saving: false,
      profileTabs: [
        { id: 'favorites', name: '我的收藏', icon: 'fas fa-heart' },
        { id: 'reviews', name: '我的评价', icon: 'fas fa-comment' },
        { id: 'plans', name: '行程规划', icon: 'fas fa-route' },
        { id: 'settings', name: '账户设置', icon: 'fas fa-cog' }
      ],
      quickActions: [
        { id: 'changePassword', name: '修改密码', icon: 'fas fa-key' },
        { id: 'privacy', name: '隐私设置', icon: 'fas fa-shield-alt' },
        { id: 'payment', name: '支付方式', icon: 'fas fa-credit-card' },
        { id: 'help', name: '帮助中心', icon: 'fas fa-question-circle' }
      ],
      user: {
        name: '旅行者张',
        avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80',
        bio: '热爱旅行，喜欢探索世界的每一个角落',
        joinDate: '2023-01-15',
        lastLogin: '2024-01-20 14:30',
        stats: {
          followers: 128,
          following: 56,
          reviews: 42,
          favorites: 89
        }
      },
      settings: {
        name: '旅行者张',
        email: 'traveler@example.com',
        bio: '热爱旅行，喜欢探索世界的每一个角落',
        phone: '+86 138 0013 8000',
        location: '北京',
        notifications: {
          email: true,
          push: false
        }
      },
      userBadges: [
        { id: 1, name: '初来乍到', icon: 'fas fa-map-marker-alt' },
        { id: 2, name: '美食家', icon: 'fas fa-utensils' },
        { id: 3, name: '摄影达人', icon: 'fas fa-camera' },
        { id: 4, name: '攻略作者', icon: 'fas fa-pen' },
        { id: 5, name: '资深旅者', icon: 'fas fa-passport' },
        { id: 6, name: '收藏家', icon: 'fas fa-heart' }
      ],
      favoriteItems: [
        {
          id: 1,
          name: '巴黎',
          type: '城市',
          image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          description: '浪漫之都，艺术与文化的殿堂'
        },
        {
          id: 2,
          name: '埃菲尔铁塔',
          type: '景点',
          image: 'https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          description: '巴黎的标志性建筑'
        },
        {
          id: 3,
          name: '北京烤鸭',
          type: '美食',
          image: 'https://images.unsplash.com/photo-1585032226651-759b368d7246?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          description: '传统北京特色菜'
        }
      ],
      userReviews: [
        {
          id: 1,
          target: '巴黎埃菲尔铁塔',
          type: '景点',
          rating: 5,
          date: '2024-01-15',
          content: '夜景非常漂亮，值得排队等待！登顶后可以看到整个巴黎的美景，特别是傍晚时分，景色绝美。',
          tags: ['夜景', '地标', '浪漫'],
          likes: 12,
          comments: 3
        },
        {
          id: 2,
          target: '全聚德烤鸭店',
          type: '餐厅',
          rating: 4,
          date: '2024-01-10',
          content: '烤鸭皮脆肉嫩，味道正宗。服务也很周到，就是价格稍微有点高。',
          tags: ['烤鸭', '老字号', '北京菜'],
          likes: 8,
          comments: 2
        }
      ],
      travelPlans: [
        {
          id: 1,
          title: '欧洲浪漫之旅',
          description: '法国、意大利、瑞士三国的经典路线，体验欧洲的浪漫与文化',
          destination: '欧洲',
          duration: '14天',
          travelers: '2人',
          budget: '￥50,000',
          progress: 75,
          status: '进行中',
          statusClass: 'bg-warning',
          progressClass: 'bg-warning'
        },
        {
          id: 2,
          title: '日本樱花季',
          description: '东京、京都、大阪的樱花观赏之旅',
          destination: '日本',
          duration: '10天',
          travelers: '4人',
          budget: '￥30,000',
          progress: 30,
          status: '规划中',
          statusClass: 'bg-info',
          progressClass: 'bg-info'
        },
        {
          id: 3,
          title: '东南亚海岛游',
          description: '泰国普吉岛、印尼巴厘岛的海岛度假',
          destination: '东南亚',
          duration: '8天',
          travelers: '2人',
          budget: '￥20,000',
          progress: 100,
          status: '已完成',
          statusClass: 'bg-success',
          progressClass: 'bg-success'
        }
      ]
    }
  },
  methods: {
    editProfile() {
      this.activeTab = 'settings'
    },
    editAvatar() {
      alert('头像编辑功能开发中...')
    },
    logout() {
      if (confirm('确定要退出登录吗？')) {
        this.$router.push('/login')
      }
    },
    handleQuickAction(actionId) {
      const actions = {
        changePassword: () => alert('修改密码功能开发中...'),
        privacy: () => alert('隐私设置功能开发中...'),
        payment: () => alert('支付方式功能开发中...'),
        help: () => alert('帮助中心功能开发中...')
      }
      if (actions[actionId]) {
        actions[actionId]()
      }
    },
    removeFavorite(itemId) {
      if (confirm('确定要取消收藏吗？')) {
        this.favoriteItems = this.favoriteItems.filter(item => item.id !== itemId)
      }
    },
    viewItem(item) {
      console.log('查看项目:', item)
    },
    editReview(reviewId) {
      alert('编辑评价功能开发中...')
    },
    deleteReview(reviewId) {
      if (confirm('确定要删除这条评价吗？')) {
        this.userReviews = this.userReviews.filter(review => review.id !== reviewId)
      }
    },
    createNewPlan() {
      alert('新建行程功能开发中...')
    },
    viewPlan(planId) {
      alert('查看行程详情功能开发中...')
    },
    editPlan(planId) {
      alert('编辑行程功能开发中...')
    },
    deletePlan(planId) {
      if (confirm('确定要删除这个行程吗？')) {
        this.travelPlans = this.travelPlans.filter(plan => plan.id !== planId)
      }
    },
    async updateSettings() {
      this.saving = true
      try {
        // 模拟保存设置
        await new Promise(resolve => setTimeout(resolve, 1000))
        alert('设置已保存！')
        // 更新用户信息
        this.user.name = this.settings.name
        this.user.bio = this.settings.bio
      } catch (error) {
        alert('保存失败，请重试')
      } finally {
        this.saving = false
      }
    },
    resetSettings() {
      if (confirm('确定要重置所有设置吗？')) {
        this.settings = {
          name: '旅行者张',
          email: 'traveler@example.com',
          bio: '热爱旅行，喜欢探索世界的每一个角落',
          phone: '+86 138 0013 8000',
          location: '北京',
          notifications: {
            email: true,
            push: false
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.profile-nav {
  z-index: 1020;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: #6c757d;
  font-weight: 500;
  padding: 1rem 1.5rem;
  transition: all 0.3s ease;
}

.nav-tabs .nav-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  background: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.avatar {
  width: 100px;
  height: 100px;
}

.user-stats .stat-item {
  text-align: center;
}

.favorite-card, .plan-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.favorite-card:hover, .plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.quick-actions .btn {
  text-align: left;
}

.info-item:last-child {
  margin-bottom: 0 !important;
}

.badge-item {
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.badge-item:hover {
  background-color: #f8f9fa;
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .profile-header .d-flex {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar-section {
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }
  
  .user-stats {
    justify-content: center;
  }
  
  .col-md-4.text-md-end {
    text-align: center !important;
    margin-top: 1rem;
  }
}
</style>